<template>
  <section class="main">
    <el-form
      ref="myFormRef"
      :model="formData"
      :rules="rules"
      label-width="0px"
      size="large"
    >
      <h2>欢迎使用管理系统</h2>
      <el-form-item prop="mobile">
        <el-input
          v-model="formData.mobile"
          placeholder="请输入电话号码"
          maxlength="11"
          type="tel"
          clearable
        />
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          v-model="formData.password"
          type="password"
          maxlength="21"
          placeholder="请输入密码"
          show-password
        />
      </el-form-item>
      <el-form-item prop="verificationCode" v-if="useVerificationCode">
        <div class="code-row">
          <el-input
            v-model="formData.verificationCode"
            maxlength="4"
            placeholder="请输入验证码"
            class="code-input"
          />
          <img
            :src="verificationCodeSrc"
            class="code-image"
            @click="requestCode"
          />
        </div>
      </el-form-item>
      <el-form-item class="item-btns">
        <el-button
          type="primary"
          native-type="submit"
          @click.prevent="submitForm(myFormRef)"
          >登录</el-button
        >
        <el-button type="primary" @click="resetForm(myFormRef)">清空</el-button>
      </el-form-item>
    </el-form>
  </section>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { admin1, admin2 } from "@/config/data";
import { setAdminRoute } from "@/router";
import ajax from "@/util/request";
import md5 from "js-md5";

import type { FormInstance, FormRules } from "element-plus";
const myFormRef = ref<FormInstance>();

const formData = reactive({
  mobile: "",
  password: "",
  uuid: null,
});

const rules = reactive<FormRules>({
  mobile: [
    { required: true, message: "请输入手机号码", trigger: "blur" },
    { min: 11, max: 11, message: "手机号码必须是11位", trigger: "blur" },
  ],
  password: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 6, max: 19, message: "请输入6到19位密码", trigger: "blur" },
  ],
  verificationCode: [
    { required: true, message: "请输入验证码", trigger: "blur" },
  ],
});

const router = useRouter();
const store = useStore();

const verificationCodeSrc = ref("");
const useVerificationCode = ref(false);

const requestCode = () => {
  useVerificationCode.value = true;
  ajax("/login/verificationCode").then((res) => {
    if (res.data.code > 0) {
      verificationCodeSrc.value = res.data.data.code;
      formData.uuid = res.data.data.uuid;
    }
  });
};

const submitForm = (myFormRef: FormInstance) => {
  // validate：校验表单
  myFormRef.validate((valid) => {
    // 校验失败
    if (!valid) {
      return;
    }
    const data = {
      ...formData,
      // 固定参数（必传）
      applicationName: "pt",
    };

    // data.password = md5(data.password);
    if (formData.mobile == "13547811112") {
      // 模拟登录成功，记录登录用户信息
      store.commit("setAdmin", admin1);
    } else {
      store.commit("setAdmin", admin2);
    }

    setAdminRoute();
    router.push("/adm-index");

    // 发起异步请求
    // ajax("/login/adminLogin", data).then((res) => {
    //   // 登录成功
    //   if (res.data.code > 0) {
    //     // 保存本地数据
    //     store.commit("setAdmin", res.data.data);

    //     setAdminRoute();
    //     useVerificationCode.value = false;

    //     //  跳转到首页
    //     router.push("/adm-index");
    //   } else if (res.data.code == -18) {
    //     requestCode();
    //   }
    // });
  });
};

const resetForm = (myFormRef: FormInstance) => {
  if (myFormRef) {
    myFormRef.resetFields();
  }
};
</script>

<style scoped lang="scss">
.main {
  background-color: #333333;
  height: 100vh;

  .el-form {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border-radius: 20px;
    padding: 40px 60px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    margin: auto;

    h2 {
      padding: 10px;
      text-align: center;
    }
  }
  .code-row {
    display: flex;

    .code-input {
      margin-right: 20px;
    }
  }
}
</style>
<style>
.item-btns > .el-form-item__content {
  justify-content: center;
}
</style>